<template>
    <div class="loading">
        <div class="main" v-show="isLoading"></div>
        <slot></slot>
        <van-loading v-show="isLoading" class="load" size="24px" color="#0094ff" vertical>{{ text }}</van-loading>
    </div>
</template>

<script>

import Vue from 'vue';
import { Loading } from 'vant';

Vue.use(Loading);

export default {
    props : {
        isLoading : {
            type: [Boolean],
            default: true
        },
        text : {
            type : [String],
            default : '加载中...'
        }
    }
}
</script>

<style scoped>

    .main{
        position: absolute;
        background: rgba(232, 236, 255, 0.74);
        width: 100%;
        height: 100%;
        bottom: 0;
        z-index: 3;
    }

    .loading {
        position: relative;
    }

    .load {
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 999;
    }
</style>